HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav

Les éléments de section HTML5, une nouvelle façon de penser

Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça !

HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Au-delà de ce critère, les groupes de travail qui ont élaboré HTML5 ont su analyser les usages courants et s'adapter aux tendances du web avec (entre autres) les nouvelles façons de trier l'information sur une page web. Des statistiques ont été élaborées sur les attributs id les plus fréquemment attribués aux grands découpages de pages HTML.

Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Cette information est alors placée dans un élément <div class="aside"> dédié - qui permet d'affecter des propriétés de styles CSS - mais n'a aucune signification particulière pour un navigateur ou un moteur d'indexation. C'est le cas de tous les autres <div>. Le même principe peut être appliqué pour baliser les différents articles d'un site d'information : pourquoi ne pas prévoir un élément <article> plutôt que de segmenter tout le contenu avec des <div class="article"> ? Ceci en facilitera autant l'extraction d'information, la syndication de contenu, et la structuration du code source.

Liste récapitulative des éléments de section HTML5

Le tableau suivant récapitule les nouveaux éléments de section et leur usage le plus commun, tel que décrit par la spécification.

Nom	Détails
<section>	Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web
<article>	Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav>	Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)
<aside>	Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header>	Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
<footer>	Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

Un cas particulier : Internet Explorer <9

Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l'analyseur syntaxique. C'est-à-dire qu'ils ne sont non seulement pas stylés en bloc par défaut, mais également qu'on ne peut leur appliquer aucun style de quelque manière que ce soit.

Une technique alternative consiste à déclarer ces éléments au préalable en JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet effet et mis à disposition à cette adresse :

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Étant muni d'un commentaire conditionel, il ne sera chargé que pour ces versions spécifiques (Internet Explorer 6 à 8 inclus).

Pour tous les autres moteurs de navigateurs récents, il ne sera pas nécessaire d'appliquer une telle astuce : même si ces éléments n'auront pas de signification particulière pour le moteur de rendu, il sera possible de leur appliquer des styles CSS s'ils ne sont pas affichés en bloc par défaut.

Si vous utilisez déjà une bibliothèque telle que Modernizr, il ne sera pas nécessaire d'appliquer un autre script (tel que html5shim) car celle-ci embarque déjà une déclaration équivalente.

Exemples de documents

Exemple minimal

Voici un schéma basique d'un découpage d'une page HTML5. Précisons bien qu'il ne s'agit pas d'une règle fixe à appliquer à tout document mais juste d'un exemple.

L'en-tête <header>

Plutôt que de se cantonner à un simple <div id="header"> le nouvel élément <header> convient parfaitement à l'introduction d'un document. Tout comme l'élément <nav> qui remplace avantageusement <div id="menu">.

Le contenu principal et annexe

L'élément aside revêt le rôle de barre latérale, et l'élément section est appelé pour regrouper le contenu principal.

Le <footer>

Sans suprise l'élément footer est destiné au pied-de-page. Il peut accueillir des mentions spécifiques, un rappel du titre et du logo, des liens de navigation, etc.

Remarque

Finalement, il suffit de considérer qu'il s'agit d'un remplacement pragmatique de certains éléments, ayant eu un identifiant proche (id="header", id="navigation", id="content"...). Mais ce n'est qu'une impression. Se limiter à ce constat serait incomplet. L'usage de ces nouveaux éléments doit se faire à bon escient.

Exemple détaillé

Le schéma suivant est plus précis et se concentre sur chaque <article>. Il démontre que éléments de section ne se limitent pas à un simple découpage et à une application de styles graphiques mais bien à une meilleure classification sémantique de l'information.

Démonstration

On retrouve ici header, aside, footer alors qu'ils sont déjà utilisés dans d'autres parties du document. C'est un critère important : l'utilisation de ces éléments n'est pas limitée à une occurence par page. Ils peuvent très bien s'appliquer à des contenus locaux, par exemple dans <article> qui représente déjà une portion de contenu. Il peut donc possèder (entre autres) : un en-tête header (avec des titres, des informations sur la date de publication et l'auteur), un pied d'article footer, des infos complémentaires dans un ou plusieurs aside etc.

Les balises en détail

<section>

C'est la plus générique : elle est utilisée lorsqu'aucun autre élément de section n'a pu lui être préféré. Il ne faut cependant pas la confondre avec l'élément div qui n'a aucune valeur sémantique. Les deux ne sont pas interchangeables. La section regroupe un ensemble de contenu d'une même thématique, ou bien un ensemble d'éléments offrant une fonctionnalité spécifique dans une application web.

Pour résumer, on utilise l'élément <section> généralement quand :

• Ce n'est pas une balise employée uniquement pour styler un élément voire plusieurs éléments
• D'autres éléments de section ne sont pas appropriées (article, aside ou nav)
• Il contient naturellement un titre d'introduction

<section>
  <h1>Articles</h1>
    
  <article>
       ...
  </article>
</section>

Documentation sur l'élément <section>

<article>

L'élément <article> est une spécialisation de section autosuffisante, possédant une plus forte valeure sémantique. Il vise à baliser des blocs de contenu utiles que l'on pourrait extraire du document tout en conservant leur sens et leurs informations. Pour déterminer si son usage est approprié, il faut se demander si son contenu pourrait être réutilisable tel quel pour de la syndication (par exemple en le reprenant dans un flux RSS ou en le copiant-collant dans un e-mail). Il est fréquent qu'il soit présent au côté d'autres frères dans un même document.

Des éléments <article> dans un parent <article> sont censés représenter des blocs de commentaires relatifs à cet élément parent.

Dans le cadre d'un site axé sur le cinéma, on pourra se servir d'<article> pour les fiches d'identité de chaque film, pour les biographies des acteurs, pour les produits à acheter, pour chaque actualité ou encore pour chaque contribution d'un utilisateur.

<article>
  <h1>Titre de l'article</h1>
  <p>Contenu de l'article</p>
</article>

Documentation sur l'élément <article>

<aside>

L'élément aside est destiné au contenu indirectement lié à l'article lui-même : il représente ce qui l'entoure, de façon annexe. Par exemple, on pourra s'en servir pour proposer la définition d'un terme, une biographie de l'auteur de l'article, un glossaire, préciser des sources, une liste d'articles en relation... aside n'est donc pas forcément dédié au seul usage d'une barre de contenu latérale.

<aside>
  <h4>Sources de l'article</h4>
  <ul>
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Lien 2</a></li>
    <li><a href="#">Lien 3</a></li>
  </ul>
</aside>  

Documentation sur l'élément <aside>

<header>

L'élément <header> représente l'en-tête d'une section (section, article...) ou d'une page entière. Il peut contenir un logo, un ou plusieurs titres, d'autres informations d'introduction, une navigation, un formulaire de recherche général.

<article>
  <header>
    <h1>Titre de l'article</h1>
    <p>Auteur : bidule</p>
  </header>
    
  <p>Contenu de l'article</p>
</article>

Documentation sur l'élément <header>

<footer>

L'élément footer représente le pied de page, ou bien la conclusion d'une section. On y place des informations concernant l'auteur, des mentions légales, une navigation ou une pagination (en combinaison avec <nav>), un logo de rappel, des coordonnées, des dates de publication.

<article>
  ...
  <footer>
    <p>Posté par Simon, le 
      <time datetime="2012-02-02">2 février 2012</time>
    </p>
  </footer>
</article>

Documentation sur l'élément <footer>

<nav>

L'élément <nav> est une section de liens de navigation. On peut l'utiliser pour la navigation principale, mais également pour d'autres parties du document devant lister des liens de navigation interne.

<nav>
  <ul>
    <li><a href="index.html">Page d'accueil</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Documentation sur l'élément <nav>

Conclusion

HTML5 dispose d'éléments bien pensés pour un meilleur balisage sémantique de l'information. Le plus difficile n'est pas d'écrire ces nouvelles balises, mais bien de comprendre leur usage. Les confusions qui peuvent survenir (section dans article ou vice-versa par exemple) risquent de créer de longs débats quant à leur emploi : il faudra être vigilant.